<template>
    <el-dialog
        title="合并流水"
        :visible.sync="mergeShow"
        width="90%"
        style="min-width: 1100px;"
        :before-close="handleClose"
        :append-to-body="true"
    >
        <div>
            <el-row>
                <el-col :span="6">
                    <el-select v-model="searchObj.mergeQueryCondition" @change="mergeConditionChange" placeholder="请选择" style="width:100px;" size="small">
                        <el-option label="业务编号：" value="0"></el-option>
                        <el-option label="投保单号：" value="1"></el-option>
                    </el-select>
                    <el-input
                    style="width:calc(100% - 100px);padding-left: 4px;"
                    size="small"
                        v-model="searchObj.val"
                        :disabled="true"
                    ></el-input>
                </el-col>
                <el-col :span="11" style="display:flex;align-items: center;height: 32px;">
                    <span style="padding-left:8px;padding-right:8px;">合并方式：</span>
                    <el-radio-group v-model="searchObj.mergeMode" @change="mergeModeChange" size="small">
                        <el-radio label="0">根据险种代码合并数据</el-radio>
                        <el-radio label="1">根据税率合并数据</el-radio>
                    </el-radio-group>
                </el-col>
              <el-col :span="2" style="display:flex;align-items: center;height: 32px;">
                <el-checkbox v-model="searchObj.allMerge" value="false" @change="allMergeChange">合并全部</el-checkbox>
              </el-col>
                <el-col :span="5">
                    <el-button size="small" @click="search" type="primary">
                        查询
                    </el-button>
                    <el-button size="small" @click="confirm" type="primary">
                        合并
                    </el-button>
                    <el-button size="small" @click="cancle" type="primary">
                        关闭
                    </el-button>
                </el-col>
            </el-row>

            <tableList
                ref="mergeQueryList"
                border
                maxHeight="470"
                :keySet="keySet2"
                :tableData="list"
                :showSelection="true"
                :paginationShow="true"
                :pageNumber="pages.current"
                :pageSize="pages.size"
                :total="pages.total"
                @handleSelectionChange="handleSelectionChange"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
                :pageSizes="[10,100,200,300,1000]"
            >
              <template #wkpje="row">
                <span v-if="row.row.wkpje < 0" style="color: red">{{ row.row.wkpje }}</span>
                <span v-else>{{ row.row.wkpje }}</span>
              </template>
              <template #jyje="row">
                <span v-if="row.row.jyje < 0" style="color: red">{{ row.row.jyje }}</span>
                <span v-else>{{ row.row.jyje }}</span>
              </template>
              <template #bhsje="row">
                <span v-if="row.row.bhsje < 0" style="color: red">{{ row.row.bhsje }}</span>
                <span v-else>{{ row.row.bhsje }}</span>
              </template>
              <template #xxse="row">
                <span v-if="row.row.xxse < 0" style="color: red">{{ row.row.xxse }}</span>
                <span v-else>{{ row.row.xxse }}</span>
              </template>
            </tableList>
            <tableList
            style="margin-top:8px;"
                ref="tableListPageRef"
                border
                maxHeight="250"
                :keySet="keySet2"
                :tableData="selectList"
            >
              <template #wkpje="row">
                <span v-if="row.row.wkpje < 0" style="color: red">{{ row.row.wkpje }}</span>
                <span v-else>{{ row.row.wkpje }}</span>
              </template>
              <template #jyje="row">
                <span v-if="row.row.jyje < 0" style="color: red">{{ row.row.jyje }}</span>
                <span v-else>{{ row.row.jyje }}</span>
              </template>
              <template #bhsje="row">
                <span v-if="row.row.bhsje < 0" style="color: red">{{ row.row.bhsje }}</span>
                <span v-else>{{ row.row.bhsje }}</span>
              </template>
              <template #xxse="row">
                <span v-if="row.row.xxse < 0" style="color: red">{{ row.row.xxse }}</span>
                <span v-else>{{ row.row.xxse }}</span>
              </template>
            </tableList>

        </div>
    </el-dialog>
</template>
<script>
import tableList from '@/components/tableList/index.vue'
import mixinTable from "@/mixin/mtable";
import {mergeListQuery,  preMergeAxios,merge} from "@/api/transactionFlowInvoice";
import {getVmsAvalibleTaxRateByLq} from "@/api/vmsAvalibleTaxRate";
export default {
    name: 'mergeDialog',
    model: {
        prop: 'mergeShow',
        event: 'change',
    },
    mixins: [mixinTable],
    created() {},
    props: {
        mergeShow: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            searchObj: {
              rdid:'',
              mergeQueryCondition: '0',
              val: '',
              mergeMode: '0',
              allMerge: false,
              ywbh: '',
              tbdh: '',
              rdids: '',
            },
            list: [],
            selectList: [],
            keySet2: [
                {
                    label: '业务编号',
                    englishName: 'ywbh',
                    width: 180,
                    sortable: true,
                },
                {
                  label: '获票人名称',
                  englishName: 'kfhm',
                  width: 180,
                },
                {
                    label: '是否个人业务',
                    englishName: 'isgryw',
                    width: 120,
                },
                {
                    label: '是否首期业务',
                    englishName: 'issqyw',
                    width: 120,
                    formatter: (value) => {
                      return value === '1' ? '首期' : '续期'
                    },
                },
                {
                    label: '交易日期',
                    englishName: 'jyrq',
                    width: 100,
                    sortable: true,
                },
                {
                    label: '金额(含税)',
                    englishName: 'jyje',
                    width: 120,
                    isSlot: true,
                    slotName: 'jyje',
                    sortable: true,
                },
                {
                    label: '金额(不含税)',
                    englishName: 'bhsje',
                    width: 120,
                    isSlot: true,
                    slotName: 'bhsje',
                    sortable: true,
                },
                {
                  label: '税率',
                  englishName: 'sysl',
                  width: 80,
                  sortable: true,
                },
                {
                  label: '税额',
                  englishName: 'xxse',
                  width: 120,
                  isSlot: true,
                  slotName: 'xxse',
                  sortable: true,
                },
                {
                  label: '未开票金额',
                  englishName: 'wkpje',
                  width: 120,
                  isSlot: true,
                  slotName: 'wkpje',
                  sortable: true,
                },
                {
                  label: '险种代码',
                  englishName: 'xzdm',
                  width: 100,
                  sortable: true,
                },
                {
                  label: '险种简称',
                  englishName: 'xzjc',
                  width: 100,
                },
                {
                  label: '险种全称',
                  englishName: 'xzqc',
                  width: 180,
                },
                {
                  label: '投保单号',
                  englishName: 'tbdh',
                  width: 180,
                },
                {
                  label: '证件类型',
                  englishName: 'zjlx',
                  width: 100,
                },
                {
                  label: '证件号码',
                  englishName: 'zjhm',
                  width: 100,
                },
                {
                  label: '手机号',
                  englishName: 'sjh',
                  width: 120,
                },
                {
                  label: '电子邮箱',
                  englishName: 'dzyx',
                  width: 120,
                },
            ],
        }
    },
    methods: {
        handleSelectionChange(selection) {
          //获取到选中的数据rdids
          this.searchObj.rdids = selection.ids.map(item => item.rdid).join(',');
          //重新执行预合并
          this.preMerge();
        },
        handleClose() {
          this.list = []
          this.selectList = []
          this.$refs.mergeQueryList.clear();
          this.$emit('change', false)
        },
       async search() {
          // 构造参数
          let param = {
            rdid: this.searchObj.rdid,
            allMerge: this.searchObj.allMerge,
            //合并方式 0：按险种代码合并，1：按税率合并
            mergeMode: this.searchObj.mergeMode,
            //合并查询条件 ：0：业务编号，1：投保单号
            mergeQueryCondition: this.searchObj.mergeQueryCondition,
            pageNo: this.pages.current,
            pageSize: this.pages.size,
          }
          const {data, msg, code} = await mergeListQuery(param)
          if (code == 200){
            this.list = data.records.map(item=>{
              return {
                ...item
              }
            })
            this.pages.total = data.total
            this.pages.current = data.current
            this.pages.size = data.size
            this.searchObj.rdids=''
            this.$refs.mergeQueryList.clear();
            this.selectList = [];
          }
        },
        async preMerge(){
          // 构造参数
          let param = {
            rdid: this.searchObj.rdid,
            allMerge: this.searchObj.allMerge,
            //合并方式 0：按险种代码合并，1：按税率合并
            mergeMode: this.searchObj.mergeMode,
            //合并查询条件 ：0：业务编号，1：投保单号
            mergeQueryCondition: this.searchObj.mergeQueryCondition,
            rdids :this.searchObj.rdids,
          }
          const {data, msg, code} = await preMergeAxios(param)
          if (code == 200){
            this.selectList = data;
          }
        },

        confirm() {

          let ts=this.searchObj.mergeQueryCondition=='0'?'业务编号':'投保单号';
          ts+=this.searchObj.allMerge?'全部':'选择的';
          this.$alert('是否确认要按'+ts+'数据合并？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showCancelButton: true,
            type: 'warning',
          })
              .then(async () => {
                  let param = {
                    rdid: this.searchObj.rdid,
                    allMerge: this.searchObj.allMerge,
                    //合并方式 0：按险种代码合并，1：按税率合并
                    mergeMode: this.searchObj.mergeMode,
                    //合并查询条件 ：0：业务编号，1：投保单号
                    mergeQueryCondition: this.searchObj.mergeQueryCondition,
                    rdids :this.searchObj.rdids,
                  }
                  const {data, msg, code} = await merge(param)
                  if (code == 200){
                                    this.$message({
                      message: data,
                    })
                    this.$emit('resList', true)
                  }
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消',
                })
              })
        },
        cancle() {
            this.list = []
            this.selectList = []
            this.$refs.mergeQueryList.clear();
            this.$emit('change', false)
        },
      show(data,item) {
        //初始进来是ywbh
        this.searchObj.mergeQueryCondition='0';
        //初始是险种代码
        this.searchObj.mergeMode='0';
        this.searchObj.val=item.ywbh;
        this.searchObj.ywbh=item.ywbh;
        this.searchObj.tbdh=item.tbdh;
        this.searchObj.rdid=item.id;
        this.list = data.records.map(item=>{
          return {
            ...item
          }
        })
        this.pages.total = data.total
        this.pages.current = data.current
        this.pages.size = data.size
        this.searchObj.rdids=''
        this.selectList = [];
        this.searchObj.allMerge= false;
      },
      mergeConditionChange(){
          if(this.searchObj.mergeQueryCondition=='0'){
            this.searchObj.val=this.searchObj.ywbh;
          }else{
            this.searchObj.val=this.searchObj.tbdh;
          }
          // 根据业务编号还是投保单号 预合并
          this.search();
         this.preMerge();
      },
      mergeModeChange(){ // 合并方式(险种还是税率)切换的时候,预合并.
         this.preMerge();
      },

      allMergeChange(val){ // 全选的时候,预合并. 
        this.searchObj.allMerge=val;
        this.preMerge();
      },
      handleCurrentChange(val) {
        this.pages.current = val
        this.search()
      },
      handleSizeChange(val) {
        this.pages.size = val
        this.search()
      },
    },
    components: {
        tableList,
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog_wrapper .dialog-fade-leave-active {
    animation-fill-mode: forwards;
}

::v-deep .el-dialog__body {
    padding: 10px 20px;
}

::v-deep .el-row {
    margin-bottom: 12px;
}



</style>

<style lang='scss'>
@media (max-height: 850px) and (min-height: 500px) {
    // .el-dialog{
    //     margin-top: 7vh !important;
    // }
     .el-dialog {
        margin-top: 4vh !important;
    }
    .el-dialog__body {
        max-height: 80vh !important;
    }
}
@media (max-height: 3600px) and (min-height: 850px) {
    .el-dialog {
        margin-top: 15vh !important;
    }
}
</style>
